import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
  EditableProTable,
  ProFormDependency
} from '@ant-design/pro-components';
import { Col, Table } from 'antd';
import { useState } from 'react';
const SingleTableForm = ({ formRef }) => {
  const [editableKeys, setEditableRowKeys] = useState([])

  const columns = [
    {
      title: '字段',
      dataIndex: 'zd',
      valueType: 'select',
      request: async () => {
        return [
          {
            label: '字段1',
            value: '1',
          },
          {
            label: '字段2',
            value: '2',
          },
        ];
      },
    },
    {
      title: '操作符',
      dataIndex: 'czf',
      valueType: 'select',
      request: async () => {
        return [
          {
            label: '等于',
            value: '1',
          },
          {
            label: '不等于',
            value: '2',
          },
        ];
      },
    },

    {
      title: '值域',
      dataIndex: 'zy',
      valueType: 'text',
    },
    {
      title: '连接符',
      dataIndex: 'ljf',
      valueType: 'select',
      request: async () => {
        return [
          {
            label: 'AND',
            value: '1',
          },
          {
            label: 'OR',
            value: '2',
          },
        ];
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 90,
      render: (text, record) => [
        <a
          key="delete"
          onClick={() => {
            // removeRow(record);
          }}
        >
          删除
        </a>,
        <a
          key={'editable'}
          onClick={() => {
            // removeRow(record);
          }}
        >
          编辑
        </a>,
      ],
    },
  ]

  const zd_columns = [
    {
      title: '字段名称',
      dataIndex: 'name',
    },
    {
      title: '字段类型',
      dataIndex: 'type',
    },
    {
      title: '字段长度',
      dataIndex: 'length',
    },
    {
      title: '字段精度',
      dataIndex: 'jindu',
    },
    {
      title: '字段说明',
      dataIndex: 'suoming',
    }
  ]
  const zd_tableData = {
    list: [
      {
        id: 1,
        name: '字段1',
        type: '1',
        length: 10,
        jindu: 10,
        suoming: '字段1说明'
      },
      {
        id: 2,
        name: '字段2',
        type: '3',
        length: 10,
        jindu: 10,
        suoming: '字段2说明'
      },
    ],
  }

  const removeRow = (record) => {
    const tableDataSource = formRef.current?.getFieldValue(
      'table',
    );
    formRef.current?.setFieldsValue({
      table: tableDataSource.filter((item) => item.id !== record.id),
    });
  }

  return (<>
    <ProForm.Group>
      <ProFormSelect
        name="sjy"
        colProps={{ span: 12 }}
        label="数据源"
        placeholder="请选择数据源"
        options={[
          {
            label: '数据源1',
            value: '1',
          },
          {
            label: '数据源2',
            value: '2',
          }]}
      />
      <ProFormSelect
        name="sjb"
        colProps={{ span: 12 }}
        label="数据表"
        placeholder="请选择数据表"
        options={[
          {
            label: '数据源1',
            value: '1',
          },
          {
            label: '数据源2',
            value: '2',
          }]}
      />
      <ProFormSelect
        name="czlx"
        colProps={{ span: 12 }}
        label="操作类型"
        placeholder="请选择操作类型"
        options={[
          {
            label: '数据源1',
            value: '1',
          },
          {
            label: '数据源2',
            value: '2',
          }]}
      />
      <ProFormSelect
        name="qqff"
        colProps={{ span: 12 }}
        label="请求方法"
        placeholder="请选择请求方法"
        options={[
          {
            label: 'GET',
            value: '1',
          },
          {
            label: 'POST',
            value: '2',
          }]}
      />
    </ProForm.Group>

    <Col span={24}>
      <ProForm.Item
        label="请勾选返回字段"
        name="zd_ids"
      >
        <ProFormDependency name={['zd_ids']}>
          {({ zd_ids }) => <>
            <Table
              rowSelection={{
                type: 'checkbox', selectedRowKeys: zd_ids, onChange: (val) => {
                  formRef.current?.setFieldsValue({
                    'zd_ids': val
                  })
                }
              }}
              columns={zd_columns}
              rowKey={(record) => record.id}
              dataSource={zd_tableData?.list}
              pagination={false}
            /></>}
        </ProFormDependency>
      </ProForm.Item>
    </Col>

    <ProForm.Item
      label="数据过滤配置"
      name="table"
      trigger="onValuesChange"
    >
      <EditableProTable
        rowKey="id"
        toolBarRender={false}
        columns={columns}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          position: 'bottom',
          record: () => ({
            id: Date.now(),
          }),
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          onChange: setEditableRowKeys,
          actionRender: (row, _) => {
            return [<a
              key="delete"
              onClick={() => {
                removeRow(row);
              }}
            >
              删除
            </a>];
          },
        }}
      />
    </ProForm.Item>
  </>);
}

export default SingleTableForm;